<template>
	<view>
		<view class="big-box">
			<view class="top-box">
				<image style="width: 200rpx;height: 200rpx;"
					src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/a-logo.png"></image>
			</view>
			<view style="width: 690rpx;text-align: left;">
				<view style="font-size: 34rpx;padding-top: 20rpx;">申请获取以下权限</view>
				<view style="font-size: 30rpx;padding-top: 20rpx;color: #A8A8A8;">
					获得你的公开信息（昵称、头像等）
				</view>
			</view>
			<view class="protocol">
				<view class="uni-form-item uni-column">
					<checkbox-group name="checkbox" @change='isAgree=!isAgree'>
						<label>
							<checkbox value="checkbox1" :checked="isAgree ? true : false" />
							<text @click="protocol();isAgree=true" class="protocol-text">《用户服务协议及隐私政策》</text>
						</label>
					</checkbox-group>
				</view>
			</view>
			<view v-if="phoneStutas == false" class="btn_box">
				<button class="grant" hover-class="none" @tap="ToLogin">一键授权</button>
			</view>
			<view v-else class="btn_box">
				<button class='grant' type="primary" open-type="getPhoneNumber"
					@getphonenumber="authPhone">绑定手机号</button>
			</view>
			<!-- <button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx">小程序授权</button> -->
			<view class="sys_btns" @click="returns">返回首页</view>
		</view>

		


		<!-- 微信获取用户头像昵称弹窗 -->
		<u-modal v-model="showAuthorizeUser" :show-title="false" :show-confirm-button="false">
			<view class="slot-content">
				<div class="auth-card">
					<image class="avatar-img" src="../../../static/logo.png" mode="widthFix"></image>
					<div class="title">出色印象</div>
					<div class="content">邀请您补全个人信息<br></br>（昵称、头像）</div>
					<div style="margin-left: 100rpx;margin-right: 100rpx">
						<u-form :model="user" ref="uForm">
							<u-form-item label="头像">
								<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
									slot="right">
									<image class="avatar" :src="user.avatarUrl"></image>
								</button>
							</u-form-item>
							<u-form-item label="昵称">
								<input type="nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称" />
							</u-form-item>
						</u-form>
					</div>
				</div>
				<div class="auth-btncard">
					<div class="btn-unok">
						<u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false">
							拒绝</u-button>
					</div>
					<div class="btn-ok">
						<u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button>
					</div>
				</div>
			</view>
		</u-modal>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneStutas: false,
				code: '',
				isAgree: false,
				user: {
					avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					nickName: '',
				},
				showAuthorizeUser: false,
				showAuthorizePhone: false,
				userData: {}
			}
		},
		onLoad(options) {
			this.getCode()
		},
		onShow() {},
		methods: {
			returns()
			{
				uni.navigateTo({url:'/pages/index/index'})
			},
			getCode() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.code = loginRes.code
					}
				})
			},
			ToLogin() {
				let that = this
				if (!that.isAgree) return uni.showToast({
					title: '请勾选用户协议',
					duration: 2000,
					icon: 'none'
				});
				// uni.login({
				// 	provider:'weixin',
				// 	success:async res=>{	
				// 		// console.log(res);
				// 		var code = res.code?res.code:''
				// 		if(!code)
				// 		{
				// 			this.$refs.notice.show({
				// 				type:'error',
				// 				message:'获取登录凭证失败',
				// 			})
				// 			return false
				// 		}
				// 		console.log('code凭证',code);
				// 		var result = that.$ajaxRequest.post(that.baseUrl + 'common/login', {
				// 			code: code
				// 		}, true)
				// 		.then(arr=>{
				// 			uni.setStorageSync('business',arr.data.data)
				// 			console.log('111',arr.data.data);
				// 			uni.$u.route({
				// 					type:'reLaunch',
				// 					url:'/pages/index/index',
				// 				})
				// 		})
				// 		.catch(()=>{
				// 			uni.showToast({
				// 					title: "微信登录授权失败",
				// 					icon: "none"
				// 				});
				// 		})
						
				// 	}
				// })

				// uni.getUserProfile({
				// 	lang: 'zh_CN',
				// 	desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				// 	success: (data) => {
				// 		console.log('data', data)
				// 		that.$ajaxRequest.post(that.baseUrl + 'common/login', {
				// 			code: that.code
				// 		}, true).then(auth => {
				// 			console.log('auth', auth);
				// 			if (auth.data.code == 200) {
				// 				uni.setStorageSync('token', auth.data.data.token);
				// 				setTimeout(() => {
				// 					if (auth.data.data.phone == null) {
				// 						that.$ajaxRequest.post(that.baseUrl + 'user/info', {
				// 							iv: data.iv,
				// 							encryptedData: data.encryptedData
				// 						}).then((list) => {})
				// 					}

				// 				}, 200)
				// 				if (auth.data.data.phone == null) {
				// 					that.phoneStutas = true
				// 				} else {
				// 					uni.redirectTo({
				// 						url: '/pages/user/index'
				// 					})
				// 				}
				// 			} else {
				// 				uni.showToast({
				// 					title: "微信登录授权失败",
				// 					icon: "none"
				// 				});
				// 			}
				// 		})
				// 	}
				// })

			uni.login({
				provider:'weixin',
				success:function(e){
					console.log('aaa',e);
					var code = e.code
				uni.getUserInfo({
					lang: 'zh_CN',
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (data) => {
						console.log('data', data)
						that.$ajaxRequest.post(that.baseUrl + 'common/login', {
							code: that.code
						}, true).then(auth => {
							console.log('auth', auth);
							if (auth.data.code == 200) {
								uni.setStorageSync('token', auth.data.data.token);
								setTimeout(() => {
									if (auth.data.data.phone == null) {
										that.$ajaxRequest.post(that.baseUrl + 'user/info', {
											iv: data.iv,
											encryptedData: data.encryptedData
										}).then((list) => {})
									}

								}, 200)
								if (auth.data.data.phone == null) {
									that.phoneStutas = true
								} else {
									uni.redirectTo({
										url: '/pages/user/index'
									})
								}
							} else {
								uni.showToast({
									title: "微信登录授权失败",
									icon: "none"
								});
							}
						})
					}
				})
				}
			})

			},
			authPhone(e) {
				this.$ajaxRequest.post(this.baseUrl + 'user/wxPhone', {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.setStorageSync('mobile', res.data.data.mobile)
						uni.redirectTo({
							url: '/pages/user/index'
						})
					}
				})
			},
			protocol() {
				uni.navigateTo({
					url: '/pages/user/xieyi/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	.list-line {
		width: 690rpx;
		display: flex;
		align-items: center;
		position: relative;
		padding: 30rpx 0;
		border-bottom: 1rpx solid rgba(218, 218, 218, 0.59);
	}

	.mima-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 45rpx;
		color: #ADADAD;
	}

	.top-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		padding-bottom: 60rpx;
		border-bottom: 1rpx solid rgba(48, 48, 48, .2);
	}

	.buts {
		color: white;
		border-radius: 10rpx;
		padding: 10rpx 30rpx 10rpx 30rpx;
		background: #39B54A;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.but {
		font-size: 30rpx;
	}

	.sys_btns {
		width: 90%;
		text-align: center;
		background: orange;
		color: white;
		padding: 26rpx 0;
		border-radius: 50rpx;
	}

	.sys_btn {
		width: 690rpx;
		border-radius: 60rpx;
		color: white;
		background: linear-gradient(-17deg, rgba(255, 114, 59, 1), rgba(255, 147, 67, 1));
		margin-top: 60rpx;
	}

	.big-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.grant {
		background: #1aa23e;
		width: 100%;
		border-radius: 50rpx;
		color: white;
		margin: 50rpx 0;
	}

	.btn_box {
		width: 90%;
	}

	.protocol {
		width: 690rpx;
		margin: 50rpx 0 20rpx;
	}

	.protocol-text {
		color: rgb(93, 164, 223);
		font-size: 30rpx;
		vertical-align: middle;
	}

	
	.slot-content {
		.auth-card {
			display: grid;
			justify-content: center;

			.avatar-img {
				display: block;
				margin: auto;
				height: 150rpx;
				width: 150rpx;
				border-radius: 100%;
				margin-top: 30rpx;
			}

			.title {
				text-align: center;
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.content {
				font-weight: bold;
				margin: 10rpx 0;
			}
		}

		.auth-btncard {
			height: 100rpx;
			display: flex;
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;

			.btn-unok {
				border-top: 1rpx solid #f0f0f0;
				border-right: 1rpx solid #f0f0f0;
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
			}

			.btn-ok {
				border-top: 1rpx solid #f0f0f0;
				border-left: 1rpx solid #f0f0f0;
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #61749B;
				background-color: #fff;
			}
		}
	}
</style>
